<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Add support for right-to-left scripts</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet">
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
  <style>
      body {
          margin: 0;
          padding: 0;
      }

      #map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
      }
  </style>
</head>
<body>
<div id="map"></div>

<script>
  // TO MAKE THE MAP APPEAR YOU MUST
  // ADD YOUR ACCESS TOKEN FROM
  // https://account.mapbox.com
  mapboxgl.accessToken = 'pk.eyJ1IjoiMTg5OTY3NTk2NjQiLCJhIjoiY2trdWl2Z25nMTEydjJ2b2kxOWwzdHlzcCJ9.32Q1dBvmabHxCR7WWCg_Mw';
  mapboxgl.setRTLTextPlugin(
      'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
      null,
      true // Lazy load the plugin
  );
  const simple = {
    'version': 8,
    'style': 'mapbox://styles/18996759664/ckkukfdjx1hks17p8f38c35bh',
    // 'style': 'mapbox://styles/mapbox/streets-v12',
    // "style":"mapbox://styles/18996759664/ckso39y0c1g8d17pdr5r2k1wy",
    // "sprite": window.location.origin + baseUrl + "static/sprite/sprite",
    // "glyphs": "http://" +  + "/examples/data/mbstyle/ArcTilerWeb/fonts/{fontstack}/{range}.pbf",
    //  "sprite": "mapbox://sprites/mapbox/streets-v11",
    'glyphs': 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
    //"glyphs": window.location.origin + baseUrl + "static/mapfont/{fontstack}/{range}.pbf",
    'sources': {
      'esri': {
        'type': 'vector',
        'scheme': 'tms',
        'tiles': [
          'http://192.168.1.35:8080/geoserver/gwc/service/tms/1.0.0/cq_waters%3Acq_hupo@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf'
          // "http://192.168.1.35:8080/geoserver/gwc/service/tms/1.0.0/rencl_workspace%3Arencl_mvt_roads@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"
          // 'http://192.168.1.35:8080/geoserver/gwc/service/tms/1.0.0/cq_waters%3Acq_hupo@EPSG%3A4326@pbf/{z}/{x}/{y}.pbf'
        ]
      }
    },
    /*"terrain": {
     "source": "mapbox-raster-dem",
     "exaggeration": 2
     },*/
    'layers': [
      {
        'id': 'cq_waters-layer',
        'type': 'fill',
        'source': 'esri',
        'source-layer': 'cq_hupo',
        // 'minzoom': 1,
        // 'maxzoom': 17,
        'paint': {
          'fill-color': 'rgb(13,134,127)'
        },
        'layout': {
          'visibility': 'visible'
        }
      },

      {
        'id': 'background',
        //地图背景
        'type': 'background',
        'layout': {},
        'paint': {
          'background-color': {
            'base': 1,
            'stops': [
              [
                11,
                // "hsl(35, 32%, 91%)"
                'rgba(213,241,239,0.8)'
              ],
              [
                13,
                'rgba(213,241,239,0.3)'
              ]
            ]
          }
        },
        'interactive': true
      },

      {
        'id': 'coastlines_lines',
        'type': 'line',
        'source': 'esri',
        // "source-layer": "rencl_mvt_roads",
        'source-layer': 'coastlines_lines',
        'layout': {},
        'minzoom': 1,
        'paint': {
          'line-color': '#989797',
          'line-width': 2
        }
      },
      {
        'id': 'boundary_lines',
        'type': 'line',
        'source': 'esri',
        'source-layer': 'boundary_lines',
        'layout': {},
        'minzoom': 1,
        'paint': {
          'line-color': '#88f34b',
          'line-width': 2
        }
      },

      {
        'id': 'suzhou_roads',
        'type': 'line',
        'source': 'esri',
        'source-layer': 'suzhou_roads',
        'layout': {},
        'minzoom': 1,
        'paint': {
          'line-color': '#0000ff',
          'line-width': 2
        }
      },
      {
        'id': 'suzhou_railways',
        'type': 'line',
        'source': 'esri',
        'source-layer': 'suzhou_railways',
        'layout': {},
        'minzoom': 1,
        'paint': {
          'line-color': '#ff00ff',
          'line-width': 2
        }
      },
      {
        'id': 'suzhou_points',
        'type': 'circle',
        'source': 'esri',
        'source-layer': 'suzhou_roads',
        'layout': {},
        'minzoom': 1,
        'paint': {
          'circle-color': '#00ffff'
        }
      },

      {
        'id': 'disputed_areas',
        'type': 'symbol',
        'source': 'esri',
        'source-layer': 'disputed_areas',
        'minzoom': 5,
        'paint': {
          'text-color': '#3af1eb'
          // "fill-color": "rgba(13,134,127,0.6)",
        },
        'layout': {
          /* "text-font": ["Open Sans Semibold,Arial Unicode MS Bold"],*/
        }
      }
    ]
    // '_ssl': true
  }
  const map = new mapboxgl.Map({
    container: 'map',
    style: simple,// 'mapbox://styles/mapbox/streets-v12',
    center: [119.3763, 31.2788],
    zoom: 5
  });
  let coordes = "106.71798528 29.82412166, 106.71825474 29.82406127, 106.71834438 29.82379113, 106.71834438 29.82343113, 106.718085 29.82280149, 106.71786558 29.8221818, 106.71777576 29.82161196, 106.71683796 29.82123333, 106.71485256 29.82089633, 106.71347592 29.82105837, 106.71263784 29.82142962, 106.71184962 29.82151076, 106.71165018 29.82129107, 106.71162012 29.82049101, 106.7117697 29.8194507, 106.71161004 29.8187109, 106.71053256 29.81811236, 106.70985414 29.81767329, 106.70964462 29.81728359, 106.71058224 29.81622213, 106.71112098 29.81517129, 106.71166962 29.81389037, 106.71196878 29.81307987, 106.71234786 29.81277932, 106.71335568 29.8132079, 106.71417378 29.81404679, 106.71492204 29.81464578, 106.71533118 29.81498522, 106.71579 29.81508458, 106.71622902 29.81443388, 106.71565032 29.81313459, 106.71493194 29.8117755, 106.71383448 29.81066706, 106.71279678 29.80943856, 106.71189894 29.80831986, 106.71126048 29.80737081, 106.71104106 29.8068012, 106.71122088 29.80628109, 106.71172974 29.80586057, 106.71310692 29.8058189, 106.71456384 29.80605708, 106.71589098 29.80624545, 106.71660936 29.8062846, 106.71698862 29.80586421, 106.71643998 29.805255, 106.71496326 29.80449693, 106.7129676 29.8040994, 106.71195978 29.80350077, 106.7110119 29.802852, 106.71051312 29.80183284, 106.7102838 29.80109327, 106.71032394 29.80051331, 106.7107032 29.79999297, 106.71191046 29.80047141, 106.71263892 29.80085045, 106.7132277 29.80093973, 106.7136966 29.80086917, 106.71338754 29.79995976, 106.71270912 29.79924071, 106.7121603 29.79868149, 106.71102288 29.79843291, 106.70997492 29.79846414, 106.70932638 29.7986049, 106.70868774 29.79872568, 106.70732046 29.79954716, 106.70679144 29.79993771, 106.70600304 29.80047857, 106.70579334 29.80073876, 106.7058333 29.80105866, 106.70649174 29.80178771, 106.7071203 29.80256679, 106.70774868 29.80329588, 106.70811768 29.80436522, 106.70813766 29.80505507, 106.70739912 29.80611585, 106.7069601 29.80664654, 106.7067207 29.80710689, 106.7067306 29.80750694, 106.70758866 29.80753569, 106.70803758 29.80718501, 106.70856642 29.80716426, 106.70924484 29.80766331, 106.70990346 29.80936251, 106.710552 29.81088171, 106.71093126 29.81196126, 106.71084144 29.81311151, 106.70996358 29.81406285, 106.7087664 29.81507463, 106.70811804 29.81560563, 106.70795838 29.81635592, 106.70772906 29.81722631, 106.70723028 29.81775708, 106.70547438 29.81821964, 106.70482584 29.8185206, 106.7051052 29.81897024, 106.70609286 29.81911883, 106.7070906 29.8191974, 106.70761944 29.81935665, 106.7079087 29.81991632, 106.70759946 29.8205568, 106.70645232 29.82116849, 106.70547456 29.82147993, 106.70502564 29.82173058, 106.70470632 29.82196107, 106.70511546 29.82241053, 106.70618304 29.82266901, 106.70641254 29.82351875, 106.7065821 29.82437861, 106.70673186 29.82493841, 106.70737032 29.82446748, 106.70778936 29.82341678, 106.70802876 29.8228964, 106.70874696 29.82269534, 106.70994414 29.82294365, 106.71089202 29.82366225, 106.71172002 29.82444102, 106.71225876 29.82482024, 106.7127876 29.82509946, 106.71317676 29.82467885, 106.71307686 29.82382898, 106.71283746 29.82302933, 106.71294708 29.82233916, 106.71391494 29.82207771, 106.71544134 29.82225546, 106.7163093 29.82286413, 106.71706746 29.82347303, 106.71774588 29.82402203, 106.71798528 29.82412166"
  let list = coordes.split(',').map(item=>{
    let data = item.split(' ')
    return [Number(data[0]),Number(data[1])]
  })

  let response = {"code":10000,"message":"","value":[{"x":106.72554144149606,"y":29.818512206853865},{"x":106.72581150150144,"y":29.818451934136},{"x":106.72590134381558,"y":29.818181661037607},{"x":106.72590134854149,"y":29.817821413748076},{"x":106.72564140075306,"y":29.817191189081709},{"x":106.72542149977805,"y":29.816570942441094},{"x":106.72533148666203,"y":29.816000655706234},{"x":106.72439157909889,"y":29.81562119157624},{"x":106.72240161423561,"y":29.815282656672325},{"x":106.72102172923538,"y":29.81544383350749},{"x":106.72018164159285,"y":29.81581471592819},{"x":106.71939151666543,"y":29.81589530741523},{"x":106.71919159414775,"y":29.815675312018123},{"x":106.71916146937139,"y":29.814874682335554},{"x":106.71931142464482,"y":29.813833776394458},{"x":106.71915138434255,"y":29.813093343778076},{"x":106.71807126813741,"y":29.81249353526409},{"x":106.71739117097201,"y":29.81205360739813},{"x":106.71718113296579,"y":29.8116634651543},{"x":106.71812109219019,"y":29.81060204131956},{"x":106.71866117053688,"y":29.809550901607314},{"x":106.71921116825783,"y":29.808269515836228},{"x":106.71951106679741,"y":29.80745867696788},{"x":106.71989106926024,"y":29.807158202000019},{"x":106.72090130318603,"y":29.80758782386574},{"x":106.72172133199685,"y":29.808427883438627},{"x":106.72247133953639,"y":29.80902780756874},{"x":106.72288142713677,"y":29.80936775969016},{"x":106.72334130732203,"y":29.809467490335398},{"x":106.72378134643229,"y":29.80881661360187},{"x":106.72320133398107,"y":29.807516034306344},{"x":106.7224813054016,"y":29.806155507243333},{"x":106.7213812793038,"y":29.805045527481636},{"x":106.72034111993874,"y":29.803815410571479},{"x":106.71944112537297,"y":29.802695246372893},{"x":106.71880112031295,"y":29.801745031311517},{"x":106.71858117015462,"y":29.801174844081975},{"x":106.71876143997972,"y":29.800654501054376},{"x":106.7192715515831,"y":29.800234068256285},{"x":106.72065206203924,"y":29.800193382625019},{"x":106.72211243601665,"y":29.800432746399307},{"x":106.72344266335672,"y":29.800622118657527},{"x":106.72416269153649,"y":29.80066174319835},{"x":106.72454282279996,"y":29.800241277213364},{"x":106.72399294292902,"y":29.79963129245802},{"x":106.72251281967943,"y":29.798871732350695},{"x":106.72051243683691,"y":29.798472540497106},{"x":106.71950219080816,"y":29.797872738979057},{"x":106.7185520018284,"y":29.79722277893211},{"x":106.7180520072258,"y":29.796202491255323},{"x":106.71782213092132,"y":29.795462203132219},{"x":106.717862380603,"y":29.794881852681607},{"x":106.71824258944834,"y":29.794361430200579},{"x":106.71945280364047,"y":29.794841138101668},{"x":106.72018302292239,"y":29.795220989364485},{"x":106.72077321672258,"y":29.795310755212478},{"x":106.72124323750403,"y":29.79524047111406},{"x":106.72093345732638,"y":29.79433017919642},{"x":106.72025342195983,"y":29.79361012001189},{"x":106.71970328415753,"y":29.79305009037987},{"x":106.71856308646356,"y":29.79280047452804},{"x":106.71751252804244,"y":29.792830908812424},{"x":106.71686236168213,"y":29.792971249737844},{"x":106.7162221086541,"y":29.793091592378006},{"x":106.71485132732643,"y":29.79391250718254},{"x":106.71432093781924,"y":29.79430287651033},{"x":106.71353048378409,"y":29.79484342211175},{"x":106.71332023292521,"y":29.79510360938403},{"x":106.7133602923098,"y":29.795423776468703},{"x":106.7140204333016,"y":29.796153946273575},{"x":106.71465060472022,"y":29.79693414468328},{"x":106.71528058541024,"y":29.797664306634294},{"x":106.7156505104902,"y":29.798734731139694},{"x":106.71567053109591,"y":29.799425091966279},{"x":106.71493008921645,"y":29.80048598809085},{"x":106.71448993338278,"y":29.80101666697196},{"x":106.71424990963446,"y":29.80147712923132},{"x":106.7142598299083,"y":29.80187747112164},{"x":106.71512009521489,"y":29.80190700192837},{"x":106.7155701659056,"y":29.801556463206475},{"x":106.71610034886536,"y":29.801536150644258},{"x":106.71678047251045,"y":29.802036124361086},{"x":106.71744071637467,"y":29.803737070515554},{"x":106.71809084511524,"y":29.805257866248888},{"x":106.71847102581644,"y":29.80633847718154},{"x":106.71838096956997,"y":29.80748946305046},{"x":106.71750092477105,"y":29.808440759202204},{"x":106.71630073398733,"y":29.80945223911915},{"x":106.71565072712555,"y":29.80998304571309},{"x":106.71549065336179,"y":29.81073371253518},{"x":106.71526074044961,"y":29.811604497524667},{"x":106.7147606799683,"y":29.812135184826436},{"x":106.71300023259143,"y":29.81259643662076},{"x":106.71234999148715,"y":29.81289698052872},{"x":106.71263008094332,"y":29.813347193468159},{"x":106.71362031462495,"y":29.81349681824716},{"x":106.7146206285444,"y":29.81357635962078},{"x":106.71515082069399,"y":29.81373619382415},{"x":106.71544081270369,"y":29.814296501350449},{"x":106.71513077919268,"y":29.814937139953689},{"x":106.7139806887278,"y":29.815548197244188},{"x":106.71300038798181,"y":29.81585892721177},{"x":106.71255029236703,"y":29.816109314598866},{"x":106.71223013269702,"y":29.816339649234075},{"x":106.71264034315415,"y":29.816789805918306},{"x":106.7137107012821,"y":29.81704947342736},{"x":106.71394078902775,"y":29.817899995746275},{"x":106.71411078088629,"y":29.818760586627528},{"x":106.71426092303811,"y":29.81932089781421},{"x":106.71490102379585,"y":29.818850240115787},{"x":106.7153211402554,"y":29.817799215844297},{"x":106.71556115282273,"y":29.81727870021875},{"x":106.71628117061124,"y":29.817078135566065},{"x":106.7174813430386,"y":29.81732763235509},{"x":106.7184315575936,"y":29.81804749640949},{"x":106.71926157309298,"y":29.818827452137247},{"x":106.71980161425334,"y":29.81920734734273},{"x":106.72033172355656,"y":29.81948715942158},{"x":106.72072181814534,"y":29.819066557296734},{"x":106.72062168827269,"y":29.818216037661299},{"x":106.72038172372221,"y":29.817415665885674},{"x":106.72049161352196,"y":29.81672510844124},{"x":106.72146177831914,"y":29.816464188508925},{"x":106.72299174606687,"y":29.816643119568245},{"x":106.72386169467916,"y":29.8172527776264},{"x":106.72462157003642,"y":29.817862574910529},{"x":106.72530150831014,"y":29.818412365675678},{"x":106.72554144149606,"y":29.818512206853865}]}
  console.log(response.value)
  let str = ''
  response.value.forEach(item=>{
    str += item.x+ ' '+ item.y + ','
  })
  console.log(str)
</script>

</body>
</html>
